import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Cloud, Menu, X, ChevronDown } from 'lucide-react';

const Header = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
      
      // 检测当前滚动位置对应的部分
      const sections = ['home', 'solutions', 'advantages', 'clients', 'about'];
      const scrollPosition = window.scrollY + 100;
      
      for (let i = sections.length - 1; i >= 0; i--) {
        const element = document.getElementById(sections[i]);
        if (element && element.offsetTop <= scrollPosition) {
          setActiveSection(sections[i]);
          break;
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 根据当前路由设置活动状态
  useEffect(() => {
    if (location.pathname === '/zhinv-ai') {
      setActiveSection('zhinv-ai');
    } else if (location.pathname === '/') {
      setActiveSection('home');
    }
  }, [location]);

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const handleNavClick = (sectionId) => {
    setActiveSection(sectionId);
    setIsMobileMenuOpen(false);
    
    // 如果是织女AI页面，直接导航
    if (sectionId === 'zhinv-ai') {
      return;
    }
    
    // 平滑滚动到对应部分
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
    }
  };

  return (
    <header className={isScrolled ? 'scrolled' : ''}>
      <div className="header-container">
        <Link to="/" className="logo">
          <div className="logo-icon">
            <Cloud size={24} />
          </div>
          <span className="logo-text">九霄云阙</span>
        </Link>
        
        <nav aria-label="主导航" className={`nav ${isMobileMenuOpen ? 'nav-open' : ''}`}>
          <ul role="menubar">
            <li role="none">
              <Link 
                to="/"
                className={`nav-item ${activeSection === 'home' ? 'active' : ''}`}
                onClick={() => handleNavClick('home')}
                role="menuitem"
              >
                首页
              </Link>
            </li>
            <li role="none">
              <button 
                className={`nav-item ${activeSection === 'solutions' ? 'active' : ''}`}
                onClick={() => handleNavClick('solutions')}
                role="menuitem"
              >
                解决方案
              </button>
            </li>
            <li role="none" className="dropdown">
              <button 
                role="menuitem" 
                className={`dropdown-trigger ${activeSection === 'ai-services' ? 'active' : ''}`}
                aria-expanded="false"
                onClick={() => setActiveSection('ai-services')}
              >
                具身智能
                <ChevronDown size={16} className="dropdown-arrow" />
              </button>
              <div className="dropdown-content">
                <Link to="/zhinv-ai" onClick={() => handleNavClick('zhinv-ai')}>
                  <div className="dropdown-item-icon ai">🤖</div>
                  <span className="dropdown-item-text">织女AI</span>
                </Link>
                <a href="http://cicd.novemcloud.com.cn/" target="_blank" rel="noopener noreferrer">
                  <div className="dropdown-item-icon cicd">⚙️</div>
                  <span className="dropdown-item-text">CICD</span>
                </a>
              </div>
            </li>
            <li role="none">
              <button 
                className={`nav-item ${activeSection === 'advantages' ? 'active' : ''}`}
                onClick={() => handleNavClick('advantages')}
                role="menuitem"
              >
                服务优势
              </button>
            </li>
            <li role="none">
              <button 
                className={`nav-item ${activeSection === 'clients' ? 'active' : ''}`}
                onClick={() => handleNavClick('clients')}
                role="menuitem"
              >
                客户案例
              </button>
            </li>
            <li role="none">
              <button 
                className={`nav-item ${activeSection === 'about' ? 'active' : ''}`}
                onClick={() => handleNavClick('about')}
                role="menuitem"
              >
                关于我们
              </button>
            </li>
          </ul>
        </nav>
        
        <div className="header-actions">
          <a href="/login" className="login-btn">登录</a>
          <button 
            className="mobile-menu-toggle"
            onClick={toggleMobileMenu}
            aria-label="切换菜单"
            aria-expanded={isMobileMenuOpen}
          >
            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;
